<script setup lang='ts'>

//动态获取页面参数
import { onMounted, ref ,computed} from 'vue'
import { getCheckOrderDetailsByItemIdAPI } from '@/services/docter/checkOrder'
import { onLoad } from '@dcloudio/uni-app'

const query = defineProps<{
  itemId?: string
}>()

const checkOrderDetails = ref()
const getCheckOrderDetailsByItemId = async () => {
  const res = await getCheckOrderDetailsByItemIdAPI(query.itemId)
  checkOrderDetails.value = res.data
  console.log(checkOrderDetails.value)
}

// 解析 resultImg JSON 字符串为对象数组
const parsedResultImg = computed(() => {
  try {
    return JSON.parse(checkOrderDetails.value.resultImg);
  } catch (e) {
    return [];
  }
});

onMounted(() => {
  getCheckOrderDetailsByItemId()
})
</script>

<template>
  <!-- 显示检查处方ID -->
  <uni-card :title="`处方ID：${checkOrderDetails?.cocId}`">
    <view class="contentItem">
      <!-- 检查项目名称 -->
      <view>检查项目：{{ checkOrderDetails?.checkItemName }}</view>
      <!-- 备注信息 -->
      <view>备注信息：{{ checkOrderDetails?.remark || '暂无备注' }}</view>
      <!-- 项目价格 -->
      <view>项目价格：￥{{ checkOrderDetails?.price }}</view>
      <!-- 检查次数 -->
      <view>检查次数：{{ checkOrderDetails?.num || 1 }}</view>
    </view>
  </uni-card>

  <!-- 如果有检测结果，显示医生建议和图片 -->
  <uni-card v-if="checkOrderDetails?.resultMsg || parsedResultImg.length > 0">
    <uni-title type="h1" title="检测结果"></uni-title>
    <!-- 医生建议 -->
    <view style="font-weight: bold">医生建议：{{ checkOrderDetails?.resultMsg || '暂无建议' }}</view>

    <!-- 检测结果图片 -->
    <view v-if="parsedResultImg.length > 0">
      <view v-for="(item, index) in parsedResultImg" :key="item.url">
        <!-- 使用动态绑定的方式显示图片 -->
        <image
          :src="item.url"
          style="width: 100%; height: auto; margin-top: 10px"
          mode="widthFix"
        ></image>
        <uni-title type="h4" :title="`图片 ${index + 1}: ${item.name}`" align="center"></uni-title>
      </view>
    </view>
  </uni-card>
</template>




<style scoped lang='scss'>
.top {
  padding: 20rpx;

  .contentItem {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    > view {
      width: 48%;
      padding: 5rpx 0;
      color: #999;
    }
  }

  view {
    .green {
      color: #00bf9c;
    }
  }
}

</style>
